<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="sourceData" :scale="scale">
      <v-tooltip :crosshairs="crosshairs" />
      <v-axis data-key="temperature" :label="label" />
      <v-line position="month*temperature" color="city" />
      <v-point position="month*temperature" color="city" size="4" shape="circle" :style="style" />
    </v-chart>
  </div>
</template>   

<script lang="ts">
const DataSet = require("@antv/data-set");
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component({
  name: "chart-more-line",

  layout: "menu"
})
export default class ChartMoreLine extends Vue {
  @Prop({ type: Number, default: 400 }) height!: number;
  @Prop({ type: Array, required: true }) sourceData!: any[];
  data: any[] = [
    {
      month: "2018",
      city: "男生",
      temperature: 7
    },
    {
      month: "2018",
      city: "女生",
      temperature: 3.9
    },
    {
      month: "2018",
      city: "蒙族",
      temperature: 6.9
    },
    {
      month: "2019",
      city: "男生",
      temperature: 4.2
    },
    {
      month: "2019",
      city: "女生",
      temperature: 10
    },
     {
      month: "2019",
      city: "蒙族",
      temperature: 12
    },
  ];
  scale: any[] = [
    {
      dataKey: "month",
      range: [0, 1]
    }
  ];
  crosshairs: object = {
    type: "line"
  };
  label: object = {
    formatter: function formatter(val) {
      return val;
    }
  };
  style: object = {
    stroke: "#fff",
    lineWidth: 1
  };
}
</script>

<style lang='less' scoped>
</style>